<template>
<teleport to='#load'>
<div class="spin-content d-flex justify-content-center align-items-center h-100 aligen-content-center " :style="{backgroundColor: background}">
  <div class="spinner-grow big" role="status">
</div>
<div>{{text}}</div>
</div>
</teleport>

</template>

<script lang='ts'>
import { defineComponent, onUnmounted } from 'vue'
export default defineComponent({
  name: 'Loading',
  props: {
    text: {
      type: String
    },
    background: {
      type: String
    }

  },
  setup () {
    const node = document.createElement('div')
    node.id = 'load'
    document.body.appendChild(node)

    onUnmounted(() => {
      document.body.removeChild(node)
    })
  }// 为什么要在setup这个生命周期函数创建就是因为要先在组件渲染完之前创建节点。
// 同时由于你每次渲染一次组件，就创建一个节点，那么就在组件渲染完毕后再去销毁这个节点
})

</script>

<style>
.spin-content{
  position: fixed;
  left:0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, .5);
  z-index: 99;
  text-align: center;
}

</style>
